<template>
  <div class="app" style="margin:10vh">
    <div>
      <el-row>
        <el-col>
          <el-table
            :data="tableData"
            border
            style="width: 100%"
            max-height="550px"
            :header-cell-style="{background:'#DFE3ED',color:'#000'}"
          >
            <el-table-column prop="createTime" label="日期" align="center">
              <template slot-scope="scope">{{scope.row.createTime.substring(0,10)}}</template>
            </el-table-column>
            <el-table-column prop="startTime" label="上班时间" align="center">
              <template
                slot-scope="scope"
              >{{scope.row.startTime?scope.row.startTime.substring(11,19):scope.row.startTime}}</template>
            </el-table-column>
            <el-table-column prop="realTime" label="下班时间" align="center">
              <template
                slot-scope="scope"
              >{{scope.row.realTime?scope.row.realTime.substring(11,19):scope.row.realTime}}</template>
            </el-table-column>
            <el-table-column prop="endTime" label="实际下班时间" align="center">
              <template
                slot-scope="scope"
              >{{scope.row.endTime?scope.row.endTime.substring(11,19):scope.row.endTime}}</template>
            </el-table-column>
            <el-table-column prop="endTime" label="操作" align="center">
              <template slot-scope="scope">
                <div>
                  <el-button @click="updateEndTime(scope.row.id)" type="primary">下班打卡</el-button>
                  <el-button @click="deltime(scope.row.id)" type="danger">删除</el-button>
                </div>
              </template>
            </el-table-column>
          </el-table>
        </el-col>
      </el-row>
      <el-row style="margin-top:2vh">
        <el-col>
          <el-button @click="dialogFormVisible=true" type="primary">上班打卡</el-button>
        </el-col>
      </el-row>
      <!-- 弹窗 -->
      <el-dialog :visible.sync="dialogFormVisible" width="30%" v-dialogDrag>
        <el-form :model="ruleForm" :rules="rules" ref="ruleForm">
          <el-form-item label="实际上班时间" :label-width="formLabelWidth" prop="datetime">
            <el-date-picker v-model="ruleForm.datetime" type="datetime" placeholder="选择日期时间"></el-date-picker>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取 消</el-button>
          <el-button type="primary" @click="insertStartTime('ruleForm')">确 定</el-button>
        </div>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import { totalMsg } from "@/utils/func.js";
import { getList,insertStartTime,updateEndTime,deltime } from "@/api/index.js";
export default {
  name: "App",
  data() {
    return {
      tableData: [], //数据源
      dialogFormVisible: false, //打卡弹框
      formLabelWidth: "120px",
      ruleForm: {
        datetime: ""
      },
      rules: {
        datetime: [
          { required: true, message: "请选择上班时间", trigger: "change" }
        ]
      }
    };
  },
  methods: {
      //删除时间
    deltime(id) {
      let data = {id};
      deltime(data).then(res => {
          if (res === "删除成功") {
            totalMsg("success", "删除成功!");
            this.getList();
          } else {
            totalMsg("erroe", "删除失败!");
          }
        })
    },
    //上班打卡
    insertStartTime(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          let date = this.ruleForm.datetime;
          let realtime = date.getTime() + 34200000;
          let realdata = this.formatDateTime(new Date(realtime));
          let data ={
              date:this.formatDateTime(date),
              realdata: realdata
          }
          insertStartTime(data).then(res=>{
              if (res === "添加成功") {
                totalMsg("success", "上班打卡成功!");
                this.dialogFormVisible = false;
                this.getList();
              } else {
                totalMsg("error", "上班打卡失败!");
              }
          }).catch(err => {
              totalMsg("error", err);
            })   
        } else {
          return false;
        }
      });
    },
    // 下班打卡
    updateEndTime(id) {
        let data={
            id:id,
            endTime:this.formatDateTime(new Date())
        }
        updateEndTime(data).then(res=>{
            if (res == "修改成功") {
            totalMsg("success", "下班打卡成功!");
            this.getList();
          } else {
            totalMsg("error", "下班打卡失败!");
          }
        }).catch(err => {
          totalMsg("error", err);
        })
    },
    //获取列表
    getList() {
      getList().then(res=>{
          this.tableData=res.reverse()
      })
    },
    //格式化时间
    formatDateTime(date) {
      let y = date.getFullYear();
      let m = (date.getMonth() + 1).toString().padStart(2, "0");
      let d = date.getDate().toString().padStart(2, "0");
      let h = date.getHours().toString().padStart(2, "0");
      let minute = date.getMinutes().toString().padStart(2, "0");
      let second = date.getSeconds().toString().padStart(2, "0");
      return y + "-" + m + "-" + d + " " + h + ":" + minute + ":" + second;
    }
  },
  mounted() {
    this.getList();
  }
};
</script>

<style>
.el-table--border {
  border: 1px solid #b9bed1 !important;
}
.el-table--border td,
.el-table--border th,
.el-table__body-wrapper .el-table--border.is-scrolling-left ~ .el-table__fixed {
  border-right: 1px solid #b9bed1 !important;
}
.el-table td,
.el-table th.is-leaf {
  border-bottom: 1px solid #b9bed1 !important;
}
.el-table th {
  background-color: #dfe3ed !important;
}
.el-table tr div {
  color: black;
  font-size: 16px;
}
</style>
